<template>
  <div>
    <div class="page">
      <!-- <div>
        <a-button>返回</a-button>
      </div>-->
      <div class="pageBody">
        <div style="margin:0px 0px 20px 0px">
          <a-button type="primary" icon="plus" @click="onAdd">创建</a-button>
        </div>

        <!-- 表格 -->
        <div class="atable" style="margin-bottom:20px">
          <a-table :columns="columns" :data-source="data" :pagination="false">
            <span slot="progressStatus" slot-scope="progressStatus">
              <a-switch :default-checked="progressStatus">
                <a-icon slot="checkedChildren" type="check" />
                <a-icon slot="unCheckedChildren" type="close" />
              </a-switch>
            </span>

            <span slot="action" slot-scope="text, record">
              <a style="color:#1890FF;margin-right:20px" @click="onEdit(text, record)">编辑</a>
              <a style="color:#1890FF;" @click="onDelete(text, record)">删除</a>
            </span>
          </a-table>
        </div>
        <!-- 分页 -->
        <div class="pagination flexBetween">
          <div>共 {{total}} 条记录 第 {{current}} / {{this.configFun.pageNum(Math.ceil((total/pageSize)))}} 页</div>
          <div>
            <a-pagination
              :current="current"
              :page-size-options="pageSizeOptions"
              :total="this.configFun.pageNum(total)"
              show-size-changer
              :page-size="pageSize"
              @showSizeChange="onShowSizeChange"
              @change="pageChange"
              show-quick-jumper
            >
              <template slot="buildOptionText" slot-scope="props">
                <span>{{ props.value }}条/页</span>
                <!-- <span v-if="props.value === '40'">全部</span> -->
              </template>
            </a-pagination>
          </div>
        </div>
      </div>

      <!-- 对话框 -->
      <div class="amodal">
        <a-modal
          v-model="visible"
          :title="modelTitle"
          @ok="handleOk"
          :maskClosable="false"
          cancelText="取消"
          okText="确认"
          class="aModal"
          :centered="true"
        >
          <a-form-model ref="ruleForm" :model="form" v-if="visible" :rules="rules">
            <a-form-model-item ref="name" label="栏目名称" prop="name">
              <a-input v-model="form.name" :maxLength="30" placeholder="请输入栏目名称" />
            </a-form-model-item>
            <a-form-model-item ref="order" label="排序" prop="order">
              <a-input v-model="form.order" :maxLength="30" placeholder="请输入排序" />
            </a-form-model-item>
            <a-form-model-item ref="order" label="推送范围" prop="range" style="margin-bottom:0">
              <a-radio-group v-model="rangeValue" @change="onRangeChange">
                <a-radio :value="1">全部空间</a-radio>
                <a-radio :value="2">指定空间</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <div style="color:#000">
              <div>京沪扩建项目</div>
              <a-checkbox-group @change="onCheckboxChange" v-model="checkValue">
                <a-row>
                  <a-col :span="21">
                    <a-checkbox value="A">空间1</a-checkbox>
                  </a-col>
                  <a-col :span="21">
                    <a-checkbox value="B">空间2</a-checkbox>
                  </a-col>
                </a-row>
              </a-checkbox-group>
            </div>
            <div style="color:#000">
              <div>平广扩建项目</div>
              <a-checkbox-group @change="onCheckboxChange" v-model="checkValue">
                <a-row>
                  <a-col :span="21">
                    <a-checkbox value="A">空间1</a-checkbox>
                  </a-col>
                  <a-col :span="21">
                    <a-checkbox value="B">空间2</a-checkbox>
                  </a-col>
                </a-row>
              </a-checkbox-group>
            </div>
          </a-form-model>
        </a-modal>
      </div>
    </div>
  </div>
</template>

<script>
const columns = [
  { title: '栏目名称', dataIndex: 'recordDate', key: 'recordDate' },
  { title: '排序', dataIndex: 'fullName', key: 'fullName', scopedSlots: { customRender: 'fullName' } },
  { title: '内容数量', dataIndex: 'postName', key: 'postName', align: 'center' },
  { title: '更新时间', dataIndex: 'time', key: 'time', align: 'center' },
  { title: '推送范围', dataIndex: 'range', key: 'range', align: 'center' },
  {
    title: '显示/隐藏',
    dataIndex: 'progressStatus',
    key: 'progressStatus',
    scopedSlots: { customRender: 'progressStatus' },
    align: 'center'
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center'
  }
]
const tabdata = [
  {
    key: '1',
    recordDate: '安全教育',
    fullName: '31.2G/800G',

    postName: '8',
    time: '2020-07-08 15:07:13',
    range: '全部空间',
    progressStatus: true
  },
  {
    key: '2',
    recordDate: '技术交底',
    fullName: '31.2G/800G',
    postName: '8',
    time: '2020-07-08 15:07:13',
    range: '指定空间',
    progressStatus: false
  }
]
export default {
  data() {
    return {
      columns,
      data: tabdata,
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      current: 1,
      pageSize: 10,
      total: 1,
      modelTitle: '新建栏目',
      visible: false,
      form: {
        name: ''
      },
      rangeValue: 1,
      checkValue: ['A'],
      rules: {
        name: [
          {
            required: true,
            message: '请输入栏目名称',
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      this.current = 1
      this.pageSize = pageSize
      //   this.getTotal(pageSize, this.current)
      // this.getTable()
    },
    pageChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      //   this.getTotal(pageSize, this.current)
    },
    onDelete() {},
    onEdit() {},
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.visible = false
        } else {
          return false
        }
      })
    },
    onAdd() {
      this.visible = true
      this.form.name = ''
    },
    //配置管理
    onSet() {
      this.$router.push({ path: '/projectService/spaceAllocation' })
    },
    onRangeChange() {},
    onCheckboxChange() {}
  }
}
</script>

<style scoped>
.pageBody {
  background: #fff;
  margin: 20px;
  padding: 35px 20px 20px;
}
::v-deep span.ant-radio + *{
  color: #000;
}
::v-deep .ant-checkbox + span{
  color: #000;
}
</style>